<template>
  <div class="list-common-table">
    <!-- 查询表单部分 -->
    <div class="pageBg">
      <div class="pageTitle">搜索条件</div>
      <QueryInlineForm style="width: 100%" :formConfiguration="formdata" ref="queryInlineForm" />
    </div>

    <!-- 表格部分 -->
    <div class="pageBg">
      <div class="mb-24 flex-c jc-sb">
        <div class="pageTitle">入驻列表</div>
      </div>
      <!-- loading:记载状态，change:当前页改变触发，page-change:点击页数改变时触发，selelct-page:选中行发生变化时触发 -->
      <t-table :data="dataList" :loading="isLoading" :row-key="rowKey" :columns="columns">
        <!-- 自定义审核状态的单元格 -->
        <template #auditStatus="{ row }">
          <span :style="{ color: getAuditStatusColor(row.auditStatus) }">
            {{ getSelectlabel(row.auditStatus, 'shzt') }}
          </span>
        </template>
        <!-- 自定义操作列的单元格 -->
        <template #op="{ row }">
          <a class="t-button-link" @click="enterDetail(row)">详情</a>
          <a class="t-button-link" @click="enterAudit(row)" v-if="row.auditStatus == 0">审核</a>
        </template>
        <template #hotelStar="{ row }">{{ getSelectlabel(row.hotelStar, 'jdxj') }} </template>
        <template #signType="{ row }">{{ getSelectlabel(row.signType, 'qyfs') }} </template>
      </t-table>
      <!--分页 -->
      <t-pagination
        v-model="pagination.defaultCurrent"
        :total="pagination.total"
        :page-size.sync="pagination.defaultPageSize"
        :on-page-size-change="SizeChange"
        @current-change="onCurrentChange"
        show-jumper
      />
    </div>
  </div>
</template>

<script>
import hotelApi from '@/api/jiekou';
import QueryInlineForm from '../../../components/queryInlineForm.vue';
import { optionVal } from '@/selectOption/index';
export default {
  components: {
    QueryInlineForm,
  },
  data() {
    return {
      dataList: [],
      isLoading: false, //表格加载状态
      rowKey: 'id',
      formData: {
        hotelName: '',
        contractType: '',
        auditStatus: '',
        hotelStar: '',
        sqrq: [],
      },
      // 表单表头配置项
      formdata: [
        {
          name: '酒店名称',
          span: 2, //栅格布局24一行
          value: '',
          fromname: 'hotelName', //传入后端的名称
          type: 'input',
          placeholder: '请输入酒店名称',
          labelWidth: '28',
          disabled: false,
        },
        {
          name: '签约方式',
          span: 2, //栅格布局24一行
          value: '',
          fromname: 'contractType', //传入后端的名称
          type: 'select',
          valuename: 'value', //配置字段value、label
          labelname: 'label',
          options: [
            { label: '个人签约', value: 1 },
            { label: '公司法人/签约', value: 2 },
            { label: '公司法人授权签约', value: 3 },
          ],
          placeholder: '请选择签约方式',
          labelWidth: '28',
          disabled: false,
        },
        {
          name: '审核状态',
          span: 2, //栅格布局24一行
          value: '',
          fromname: 'auditStatus', //传入后端的名称
          type: 'select',
          valuename: 'value', //配置字段value、label
          labelname: 'label',
          options: [
            { label: '待审核', value: 0 },
            { label: '已审核', value: 1 },
            { label: '驳回', value: 2 },
          ],
          placeholder: '请选择审核状态',
          labelWidth: '28',
          disabled: false,
        },
        {
          name: '酒店星级',
          span: 2, //栅格布局24一行
          value: '',
          fromname: 'hotelStar', //传入后端的名称
          type: 'select',
          valuename: 'value', //配置字段value、label
          labelname: 'label',
          options: [
            { label: '其他', value: 1 },
            { label: '二星级一下/经济', value: 2 },
            { label: '三星级/舒适', value: 3 },
            { label: '四星级/高档业', value: 4 },
            { label: '五星级/豪华', value: 5 },
          ],
          placeholder: '请选择酒店星级',
          labelWidth: '28',
          disabled: false,
        },
        {
          name: '申请时间',
          span: 2, //栅格布局24一行
          value: [],
          fromname: 'sqrq', //传入后端的名称
          type: 'timer',
          separator: '-',
          labelWidth: '56',
          placeholder: ['开始时间', '结束时间'],
          valueType: 'YYYY-MM-DD',
          disabled: false,
        },
        {
          type: 'button',
          span: 2,
          buttonArray: [
            {
              style: '',
              theme: 'default',
              variant: '',
              bottonname: '重置',
              type: 'button',
            },
            {
              style: '',
              theme: 'primary',
              variant: '',
              bottonname: '搜索',
              type: 'button',
            },
          ],
        },
      ],
      // 表格表头配置项
      columns: [
        {
          title: 'ID',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'id',
        },
        {
          title: '用户账号',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'userAccount',
        },
        {
          title: '酒店名称',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'hotelName',
        },
        {
          title: '酒店星级',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'hotelStar',
          option: 'jdxj',
        },
        {
          title: '签约方式',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'signType',
          option: 'qyfs',
        },
        {
          title: '审核状态',
          colKey: 'auditStatus',
          width: 200,
          option: 'shzt',
        },
        {
          title: '处理人',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'auditPerson',
        },
        {
          title: '申请时间',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'applyTime',
        },
        {
          title: '处理时间',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'auditTime',
        },
        {
          align: 'left',
          fixed: 'right',
          width: 200,
          colKey: 'op',
          title: '操作',
        },
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: null,
      },
    };
  },
  created() {
    this.getTableList();
    //将事件挂载在formdata中
    this.formdata.forEach((element) => {
      if (element.type == 'button' || element.type == 'button2') {
        element.buttonArray.forEach((item) => {
          if (item.bottonname == '搜索') {
            item.callback = this.queryClick;
            // 直接就是回调queryClick
          }
          if (item.bottonname == '重置') {
            item.callback = this.reset;
          }
        });
      }
    });
  },
  methods: {
    // 进入页面获取数据
    // 分页请求
    getTableList() {
      this.isLoading = true;
      let params = {
        pageSize: this.pagination.defaultPageSize,
        pageNum: this.pagination.defaultCurrent,
        hotelName: this.formData.hotelName,
        contractType: this.formData.contractType,
        auditStatus: this.formData.auditStatus,
        hotelStar: this.formData.hotelStar,
        beginApplicationDate: this.formData.sqrq.length ? this.formData.sqrq[0] : '',
        endApplicationDate: this.formData.sqrq.length ? this.formData.sqrq[1] : '',
      };
      hotelApi.pagePartQuery(params).then((res) => {
        this.dataList = res.data.records;
        this.pagination.total = Number(res.data.total);
        this.isLoading = false;
      });
    },
    queryClick() {
      this.formData = this.$refs.queryInlineForm.getValue();
      this.getTableList();
    },
    reset() {
      this.formdata.forEach((v) => {
        if (v.fromname == 'sqrq') {
          v.value = [];
        } else {
          v.value = '';
        }
      });
      this.formData = this.$refs.queryInlineForm.getValue();
      this.getTableList();
    },
    // 选择分页数量事件
    sizeChangeFun(val) {
      this.pagePrames.pageSize = val;
      this.pagePrames.pageNum = 1;
      this.getTableList();
    },
    // 当前页改变
    onCurrentChange(changeParams, triggerAndData) {
      this.pagination.defaultCurrent = changeParams;
      this.getTableList();
    },
    // 页数改变
    onPageChange(pageInfo) {
      // this.pagination.current = pageInfo.current;
      // this.pagination.pageSize = pageInfo.pageSize;
    },
    // 每页条数改变时
    SizeChange(pageSize, pageInfo) {
      this.pagination.defaultPageSize = pageSize;
      this.pagination.defaultCurrent = 1;
      this.getTableList();
    },
    //选中行发生变化时触发
    onSelectChange(value, { selectedRowData }) {
      // console.log('Select change event:', value, selectedRowData);
    },
    // 动态返回颜色
    getAuditStatusColor(auditStatus) {
      return auditStatus === 0 ? '#FA9550' : '#56C08D';
    },
    // 进入详情
    enterDetail(row) {
      // console.log('Detail clicked for row:', row);
      // 酒店ID
      this.$store.commit('backMassage/idData', row.id);
      console.log(this.$store.state.backMassage.idMassage);
      // // 申请时间
      this.$store.commit('backMassage/applyTime', row.applyTime);
      this.$store.commit('backMassage/auditTime', row.auditTime);
      //console.log('auditTime', this.$store.state.backMassage.auditTime);
      this.$store.commit('backMassage/editType', false);
      this.$router.push('/enterManagement/details');

      // 在这里处理详情按钮点击逻辑
    },
    // 进入审核
    enterAudit(row) {
      console.log('Audit clicked for row:', row);
      // 在这里处理审核按钮点击逻辑
      // 酒店ID
      this.$store.commit('backMassage/idData', row.id);
      this.$router.push('/enterManagement/aptitude');
    },
    // 表单提交验证
    onSubmit() {
      // 这啥意思，为啥要在mounted里面调用？
      this.fetchData({
        current: this.pagination.current || this.pagination.defaultCurrent,
        pageSize: this.pagination.pageSize || this.pagination.defaultPageSize,
      });
    },
    // 重置表单
    onReset() {
      this.formData = {};
      this.$message.success('重置成功');
    },
    // 组件没有这个事件
    onPick(value, context) {
      console.log('onPick:', value, context);
      console.log(context.partial);
      //转换点击的日期
      function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day} 00:00:00`;
      }
      if (context.partial === 'start') {
        // 转换时间格式
        this.formData.beginApplicationDate = formatDate(value);
      }
      if (context.partial === 'end') {
        this.formData.endApplicationDate = formatDate(value);
      }
    },
  },
  computed: {
    getSelectlabel() {
      return (val, optionName) => {
        let label = '';
        optionVal[optionName].forEach((v) => {
          if (val !== null && val !== undefined && v.value == val) {
            label = v.label;
          }
        });
        return label;
      };
    },
  },
};
</script>

<style scoped>
.t-button-link {
  color: #0052d9;
  cursor: pointer;
  text-decoration: none;
}
</style>
